<!-- 课程管理 -->
<template>
  <div>
    <course-detail v-if="manageVisible === 3" :courseInfoId="courseInfoId" @changeShowDetail="courseManage()"></course-detail>
    <student-manage v-if="manageVisible === 2" :courseInfoId="courseInfoId" @refreshDataList="courseManage()"></student-manage>
    <div v-if="manageVisible === 1">
    <el-form :inline="true" :model="dataForm" label-width="80px" @keyup.enter.native="getDataList()">
        <el-form-item >
            <el-input v-model="dataForm.course_name" placeholder="课程名称"></el-input>
        </el-form-item>
         <el-form-item label="创建时间">
            <el-row :gutter="10" >
                <el-col :span="11">
                 <el-date-picker v-model="dataForm.start_time" type="date" style="width:150px" ></el-date-picker>
                </el-col>
                <el-col :span="1" class="line">-</el-col>
                <el-col :span="11">
                  <el-date-picker v-model="dataForm.end_time" type="date" style="width:150px"></el-date-picker>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" @click="getDataList()">查询</el-button>
            <el-button type="primary" @click="addAndUpdateHandle()">新增课程</el-button>
            <el-button type="danger" :disabled="selectionList.length <= 0" @click="deleteHandle()">批量删除</el-button>
        </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="selectionChangeHandle">
      <el-table-column
        type="selection"
        width="50">
      </el-table-column>
        <el-table-column
        header-align="center"
        align="center"
        prop="course_name"
        label="课程名" >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="course_number"
        label="课程编号" >
      </el-table-column>
       <el-table-column
        header-align="center"
        align="center"
        prop="cover_picture"
        label="课程封页" >
        <template slot-scope="scope">
          <div>
            <img style="height:100px" :src="scope.row.cover_picture" alt="">
          </div>
        </template>
      </el-table-column>
       <el-table-column
        header-align="center"
        align="center"
        label="课程状态" >
        <template slot-scope="scope">
          <div>
             <el-tag type="danger" size="small" v-if="scope.row.course_status == 0">禁止</el-tag>
            <el-tag type="success" size="small"  v-else>正常</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="student_count"
        label="学生数" 
        width="80">
      </el-table-column>
         <el-table-column
        header-align="center"
        align="center"
        prop="create_time"
        label="课程创建时间" >
      </el-table-column>
         <el-table-column
        header-align="center"
        align="center"
        label="操作" >
       <template slot-scope="scope"  >
         <el-row>
           <el-col :span="12">
               <el-button type="text" size="small" @click="courseDetailHandle(scope.row.course_info_id)">课程详情</el-button>
           </el-col>
            <el-col :span="12">  
              <el-button type="text" size="small" @click="addAndUpdateHandle(scope.row.course_info_id)">修改课程</el-button>
          </el-col>
         </el-row>
          <el-row>
           <el-col :span="12">
           <el-button type="text" size="small"  @click="studentManageHandle(scope.row.course_info_id)">学生管理</el-button>
          </el-col>
            <el-col :span="12">  
              <el-button type="text" size="small" style="color:#f56c6c;" @click="deleteHandle(scope.row.course_info_id)">删除课程</el-button>
       </el-col>
         </el-row>
       </template>
      </el-table-column>
    </el-table>
    <el-pagination
     @currentChange="currentChangeHandle"
     @sizeChange="sizeChangeHandle"
     :current-page="pageIndex"
     :page-size="pageSize"
     :page-sizes="[10,20,30]"
      layout="total,sizes,prev, pager, next,jumper"
      :total="pageTotal">
    </el-pagination>
    <course-add-and-update v-if="addAndUpdateVisible" ref="addAndUpdate" @refreshDataList="getDataList()"></course-add-and-update>
  </div>
  </div>
</template>

<script>
import CourseDetail from './course-detail.vue';
import StudentAddOrUpdate from '../user/student-add-or-update.vue';
import CourseAddAndUpdate from './course-add-and-update.vue'
import StudentManage from './student-manage.vue';
export default {
  components:{CourseAddAndUpdate, StudentAddOrUpdate, StudentManage, CourseDetail},
  data () {
    return {
      pageIndex:1,
      pageTotal:0,
      pageSize:10,
      tableData:[],
      addAndUpdateVisible:false,
      manageVisible:1,
      dataForm:{
        course_name :'',
        start_time:'',
        end_time:''
      },
      selectionList:'',
      courseInfoId:''
    }
  },
  created(){
      this.getDataList();
  },
  methods:{
      //获得数据列表
      getDataList(){
           this.$http({
               url:this.$http.adornUrl('/teacher/courseManage/list'),
               method:'get',
               params:this.$http.adornParams({
                   page : this.pageIndex,
                   limit : this.pageSize,
                   course_name:this.dataForm.course_name,
                   start_time:this.dataForm.start_time,
                   end_time:this.end_time
               })
           }).then(({data})=>{
               if(data && data.code === 0){
                   this.tableData = data.page.list
                   this.pageTotal = data.page.totalCount
               }else{
                   this.$message(data.msg)
               }  
           })
      },
      //每页数
      sizeChangeHandle(val){
        this.pageIndex = 1;
        this.pageSize = val;
        this.getDataList();
      },
      //当前页
      currentChangeHandle(val){
          this.pageIndex = val;
          this.getDataList();
      },
      //多选
      selectionChangeHandle(val){
        this.selectionList = val
      },
      //添加或修改课程信息
      addAndUpdateHandle(id){
         this.addAndUpdateVisible = true;
         console.log("初始化"+id)
         this.$nextTick(()=>{
            this.$refs.addAndUpdate.init(id)
         })
      },
      //删除课程
      deleteHandle(id){
        var listIds = id ? [id] : this.selectionList.map(item=>{
             return item.course_info_id
        });
       console.log(listIds)
        this.$confirm(`确定[id=${listIds.join('，')}]进行[${id?'删除':'批量删除'}]操作？`,'提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.$http({
            url:this.$http.adornUrl('/teacher/courseManage/delete'),
            method:'post',
            data:this.$http.adornData(listIds,false)
          }).then(({data})=>{
            if(data&&data.code === 0){
               this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            }else{
              this.$message(data.msg)
            }
          })
        })
      },
      //学生管理
      studentManageHandle(id){
        this.courseInfoId = id
         if(id){
         this.manageVisible = 2;
         }
      },
      //返回课程管理
      courseManage(){
        this.manageVisible = 1;
        this.getDataList();
      },
     //课程详情管理
     courseDetailHandle(id){
         this.courseInfoId = id
         if(id){
            this.manageVisible = 3;
         }
     }
  }
}
</script>

<style  scoped>

</style>
